<template>
  <div>
    <el-container>
      <el-aside width="700px">
        <el-button type="primary" class="btn" @click="end">结束编辑</el-button>
        <el-radio name="func" border v-model="drawModel" label="polygon">绘制多边形</el-radio>
        <el-button type="info" @click="clearDraw">清除标记</el-button>
        <div id="container" style="width:100%;height:530px"/>
      </el-aside>

      <el-main>
        <el-form v-model="courierFromScope" label-width="80px">
          <el-form-item label="用户:">
            <el-select v-model="courierFromScope.userId">
              <el-option label="请选择" value=""/>
              <el-option v-for="(item,index) in userData" :label="item.name" :value="item.id" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item label="机构:">
            <el-select v-model="courierFromScope.areaId" @change="getCoreOrgScopeById">
              <el-option label="请选择" value=""/>
              <el-option v-for="(item,index) in coreOrgDataList" :label="item.name" :value="item.id" :key="index"/>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="addCourier">添加</el-button>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import globalUser from '@/api/base/globalUser/index'
import coreOrg from '@/api/base/coreOrg/index'
import AMap from 'AMap'

export default {
  name: 'add',
  data() {
    return {
      courierFromScope: {
        userId: '',
        areaId: '',
        mutiPoints: []
      },
      //全局用户数据
      userData: [],
      //全部组织数据
      coreOrgDataList: [],
      //根据id获取数据
      coreOrgData: {},
      //机构工作范围
      coreOrgScope: {},
      //高德地图map
      map: null,
      mouseTool: null,
      overlays: [],
      radios: null,
      marker: null,
      path: [],
      //多边形对象
      polygon: null,
      overlayGroup: null,
      drawModel: ''
    }
  }, methods: {
    /**
     * 当下拉框发生改变时,获取对应的机构工作范围
     */
    getCoreOrgScopeById(id) {
      coreOrg.findAllAgencyScope(id).then(data => {
        this.coreOrgScope = data.data[0]
        coreOrg.findById(id).then(data => {
          this.coreOrgData = data.data
          this.$nextTick(() => {
            /**
             * 显示地图
             */
            this.showAmap()

            let coreOrgScope = this.coreOrgScope.mutiPoints
            for (let i = 0; i < coreOrgScope.length; i++) {
              let lng = coreOrgScope[i].lng
              let lat = coreOrgScope[i].lat
              let a = [lng, lat]
              this.path.push(a)
            }
            this.polygon = new AMap.Polygon({
              path: this.path,
              strokeColor: '#FF33FF', //线颜色
              strokeOpacity: 0.2, //线透明度
              strokeWeight: 3,    //线宽
              fillColor: '#1791fc', //填充色
              fillOpacity: 0.35//填充透明度
            })
            this.polygon.setMap(this.map)
          })
        })

      })
    },
    //添加快递员工作范围
    addCourier() {
      let data = [this.courierFromScope]
      coreOrg.addCourierScope(data).then(data => {
        this.$message({
          type: 'success',
          message: '添加快递员完成!'
        })
        this.$router.push({ path: '/courier-index' })
      })
    },
    /**
     * 获取全部用户数据
     */
    queryAllGlobalUser() {
      globalUser.queryAll().then(data => {
        this.userData = data.data
      })
    },
    //获取全部组织数据
    queryAllCoreOrg() {
      coreOrg.queryAll().then(data => {
        this.coreOrgDataList = data.data
      })
    },
    /**
     *显示地图
     * */
    showAmap() {
      this.map = new AMap.Map('container', {
        zoom: 11, // 级别
        // resizeEnable: true,
        center: [Number(this.coreOrgData.longitude), Number(this.coreOrgData.latitude)]
      })

      this.marker = new AMap.Marker({
        position: new AMap.LngLat(Number(this.coreOrgData.longitude), Number(this.coreOrgData.latitude)),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: this.coreOrgData.name
      })
      this.map.add(this.marker)
      //工具
      this.mouseTool = new AMap.MouseTool(this.map)
      //监听draw事件可获取画好的覆盖物
      this.mouseTool.on('draw', this.push)
      this.radios = document.getElementsByName('func')
      for (var i = 0; i < this.radios.length; i += 1) {
        this.radios[i].onchange = this.radiosOnchange
      }
      this.draw('marker')
      AMap.event.addListener(this.mouseTool, 'draw', this.getLatitudeAndLongitude)
    },
    clearDraw() {
      this.polygon = null
      this.mouseTool.close(true)//关闭，并清除覆盖物
      for (var i = 0; i < this.radios.length; i += 1) {
        this.radios[i].checked = false
      }
    },
    //单选按钮改变时间
    radiosOnchange(e) {
      this.draw(e.target.value)
    },
    //推送到地图上
    push(e) {
      this.overlays.push(e.obj)
    },
    //开始绘制
    draw(type) {
      switch (type) {
        case 'polygon': {
          this.mouseTool.polygon({
            fillColor: '#FF0000',
            strokeColor: '#FF0000'
            //同Polygon的Option设置
          })
          break
        }
      }
    },
    getLatitudeAndLongitude(e) {//添加事件
      let path = e.obj.getPath()
      for (let i = 0; i < path.length; i++) {
        this.courierFromScope.mutiPoints[i] = {
          'lat': path[i].lat,
          'lng': path[i].lng
        }
      }
    },
    /**
     * 结束编辑的一件事
     * @param event
     */
    end() {
      let form = [this.courierFromScope]
      //添加
      coreOrg.batchSaveAgencyScope(form).then(data => {
        this.$message({
          message: '范围编辑成功!',
          type: 'success',
          showClose: true
        })
        this.$router.push({ path: '/agencyScope-index' })
      })
    }
  },
  mounted() {
    this.queryAllGlobalUser()
    this.queryAllCoreOrg()
  }
}
</script>

<style scoped>

</style>
